<template>
  <el-container style="height: 700px; border: 1px solid #eee">
    <el-header style="font-size: 30px;background-color: rgb(238, 241, 246)">历史记录</el-header>
    <el-main>
      <div id="table">
        <!-- <el-select v-model="typeselect" placeholder="请选择你想要查询的历史数据">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>  -->
        <el-input v-model="startTime" placeholder="请输入开始时间"  style="width: 150px;"></el-input>
        <el-input v-model="endTime" placeholder="请输入结束时间"  style="width: 150px;"></el-input>
        <!-- <el-time-select placeholder="起始时间" v-model="startTime" :picker-options="{
          start: '00:00:00',
          step: '00:15:00',
          end: '23:59:59'
        }">
        </el-time-select>
        <el-time-select placeholder="结束时间" v-model="endTime" :picker-options="{
          start: '00:00:00',
          step: '00:15:00',
          end: '23:59:59',
          minTime: startTime
        }">
        </el-time-select> -->
        <el-button type="primary" @click="submitresult">查找</el-button>
        <el-button type="primary" @click="flash">刷新</el-button>
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
          <el-table-column prop="people" label="进出人员">
          </el-table-column>
          <el-table-column prop="place" label="进出情况">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
        </el-table>
        <!-- <el-pagination background layout="prev, pager, next" :page-size="5" :total="total" :current-page="page"
          @size-change="HandleSizeChange" @current-change="HandleCurentChange">
        </el-pagination> -->
      </div>
    </el-main>
  </el-container>

</template>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

<script>
import axios from 'axios'
import { setInterval } from 'core-js';
export default {
  // created(){
  //   console.log("发请求");
  //     axios.get("http://localhost:8888/glslist")
  //     .then(response => {
  //       // 处理请求成功的数据
  //       console.log(response.data);
  //       // this.tableData = response.data.data.rows;
  //       // this.total = response.data.data.total
  //       this.tableData = response.data.data;
  //     })
  //     .catch(error => {
  //       // 处理请求错误
  //       console.error(error);
  //     });
  // },
  mounted() {
    console.log("发请求");
      axios.get("http://localhost:8888/inoutlist")
      .then(response => {
        // 处理请求成功的数据
        console.log(response.data);
        this.tableData = response.data.data;
        // this.tableData = response.data.data.rows;
        // this.total = response.data.data.total
      })
      .catch(error => {
        // 处理请求错误
        console.error(error);
      });
  },
  methods: {
    HandleSizeChange(){

    },
    //分页
    HandleCurentChange(newPage) {
      this.page = newPage
      axios.get("http://localhost:8888/inoutlist/" + this.page)
      .then(response => {
        // 处理请求成功的数据
        console.log(response.data);
        this.total = response.data.data.total
        this.tableData = response.data.data.rows;
      })
      .catch(error => {
        // 处理请求错误
        console.error(error);
      });
    },
    flash: function(){
      this.page = 1;
      axios.get("http://localhost:8888/inoutlist/?begin=" + this.startTime + "&end=" + this.endTime)
      .then(response => {
        // 处理请求成功的数据
        console.log(response.data);
        this.tableData = response.data.data;
        // this.total = response.data.data.total
        // this.tableData = response.data.data.rows;
      })
      .catch(error => {
        // 处理请求错误
        console.error(error);
      });
    },
    submitresult: function () {
      console.log(this.typeselect)
      console.log(this.begindate)
      console.log(this.enddate)
      axios.get("http://localhost:8888/inoutlist/?begin=" + this.startTime + "&end=" + this.endTime)
      .then(response => {
        console.log(this.page + "?begin=" + this.startTime + "&end=" + this.endTime)
        // 处理请求成功的数据
        console.log(response.data);
        this.tableData = response.data.data;
        // this.total = response.data.data.total
        // this.tableData = response.data.data.rows;
      })
      .catch(error => {
        // 处理请求错误
        console.error(error);
      });
      // if (this.typeselect == "饮水量") {
      //   this.label1 = "温度"
      //   axios.get("http://localhost:8888/listbytstate?begin=" + this.begindate + "&end=" + this.enddate)
      //     .then(response => {
      //       // 处理请求成功的数据
      //       console.log(response.data);
      //       this.tableData = response.data.data;
      //     })
      //     .catch(error => {
      //       // 处理请求错误
      //       console.error(error);
      //     });
      // }
      // else if (this.typeselect == "故障代码") {
      //   this.label1 = "湿度"
      //   axios.get("http://localhost:8888/listbyhstate?begin=" + this.begindate + "&end=" + this.enddate)
      //     .then(response => {
      //       // 处理请求成功的数据
      //       console.log(response.data);
      //       this.tableData = response.data.data;
      //     })
      //     .catch(error => {
      //       // 处理请求错误
      //       console.error(error);
      //     });
      // }

    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  },
  data() {
    return {
      tableData: [],
      options: [{
        value: '饮水量',
        label: '饮水量历史数据'
      }, {
        value: '故障代码',
        label: '故障代码'
      }
      ],
      page:1,
      typeselect: '',
      begindate: '',
      enddate: '',
      total: 0,
      startTime:"",
      endTime:"",
    }
  }
}
</script>